<template>
  <div class="mui-pages" style="background-color: #fff;">
    <header class="mui-bar mui-bar-nav">
      <div class="header-common-title flex-justify-start">
        <a @click="fn.back()" href="javascript:void(0)"><img class="back-btn" src="../../../../static/images/back.png"></a>
        <div class="header-search flex-center">关联集体学习</div>
        <a @click="save()" v-if="selected.id" href="javascript:void(0)" class="header-right-btn flex-center">确定</a>
      </div>
    </header>
    <div class="message-tab people-header">
      <div class="header-search all-search">
        <input type="search" v-model="searchKeyword" name="" placeholder="请输入会议主题关键字搜索" />
        <i class="people-search"></i>
      </div>
    </div>
    <div class="mui-scroll-wrapper mui-page-content mui-pages">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <ul class="mui-table-view organization-lists">
            <li v-if="item.subject.indexOf(searchKeyword)>=0" class="mui-table-view-cell" :class="{'active-select':isSelected(item)}" @click="select(item)" v-for="item in list">
              <div class="mine-lists-content flex-between-center">
                <div class="mui-input-row mui-checkbox mui-left flex-center">
                  <input class="lists-input" name="checkbox" value="Item 1" type="checkbox" :checked="isSelected(item)">
                </div>
                <div class="mine-lists-content">
                  <h2 class="organization-lists-title">会议主题：<span>{{item.subject}}</span></h2>
                  <div class="organization-lists-time"><span>{{fn.formatDate(item.meetTime)}}&nbsp;创建人：{{item.createByName}}</span></div>
                </div>
                <span class="mine-lists-tips" :class="{'mine-lists-money':item.statusLabel!='已开展'}">{{item.statusLabel}}</span>
              </div>
            </li>
            <div class="text-center no-data" v-if="list.length===0">
              <img src="../../../../static/images/no_data.png" alt="">
              <p>暂无数据</p>
            </div>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import footerbar from '../common/footerbar.vue'
  import tools from '@/utils/tools'
  import loginService from '@/service/loginService'
  import scheduleSign from '@/components/work/schedule/scheduleSign'
  import _ from 'lodash'
  export default {
    components: {
      footerbar, scheduleSign
    },
    name: '',
    data () {
      return {
        fn: tools,
        tabIndex: 0,
        userInfo: this.$store.state.userInfo,
        list: [],
        scheduleTypeSelected: {},
        specialType: {},
        searchKeyword: '',
        selected: {}
      }
    },
    created () {
      this.loadData()
    },
    methods: {
      isSelected (item) {
        return this.selected === item
      },
      select (item) {
        if (this.isSelected(item)) {
          this.selected = {}
          return false
        }
        this.selected = item
      },
      save () {
        let data = {
          weekPlanId: this.$route.params.weekId,
          meetingId: this.selected.id
        }
        loginService.setRelationMeetingToWeekPlan(data).then(res => {
          if (res.code === 200) {
            tools.alert('关联成功')
            tools.back()
          } else {
            tools.alert(res.message)
          }
        })
      },
      loadData () {
        let userInfo = this.$store.state.userInfo
        let partyGroupId = userInfo.partyMemberModel.partyGroupId
        let data = {
          pageIndex: 0,
          pageSize: 1000,
          partyGroupId: partyGroupId
        }
        loginService.getNotRelationMeetingList(data).then(res => {
          this.list = res.data
        })
      }
    }
  }
</script>
